<template>
  <div>
    <c-title text="关联收益"></c-title>
    <div class="new-distributor">
      <div class="user-info-box" >
        <div class="distributor" v-if="statisticsInfo">
          <img class="avatar" :src="statisticsInfo.avatar" alt="">
          <div class="distributor-name">
            <p class="name van-ellipsis">{{statisticsInfo.nickname}}</p>
            <span v-if="statisticsInfo.level" class="level">{{statisticsInfo.level}}</span>
          </div>
          <!-- <div class="commission-ratio">佣金比例：5%</div> -->
        </div>
        <div class="statistics-box" v-if="statisticsInfo">
          <div class="statistics-item">
            <p class="amounts">{{$i18n.t('money')}} {{statisticsInfo.already}}</p>
            <p class="amounts-name">已结算佣金</p>
          </div>
          <div class="statistics-item">
            <p class="amounts">{{$i18n.t('money')}} {{statisticsInfo.wait}}</p>
            <p class="amounts-name">待结算佣金</p>
          </div>
          <div class="statistics-item">
            <p class="amounts">{{$i18n.t('money')}} {{statisticsInfo.froze}}</p>
            <p class="amounts-name">冻结佣金</p>
          </div>
          <div class="statistics-item">
            <p class="amounts">{{$i18n.t('money')}} {{statisticsInfo.predict}}</p>
            <p class="amounts-name">预计佣金</p>
          </div>
          <div class="statistics-item">
            <p class="amounts">{{$i18n.t('money')}} {{statisticsInfo.valid}}</p>
            <p class="amounts-name">失效佣金</p>
          </div>
        </div>
      </div>

      <div class="detailed-box">
        <div class="detailed-title">佣金明细</div>

        <van-tabs v-model="statusType" @change="changeStatus" :ellipsis="false">
          <van-tab
            v-for="(tab, index) in statusTabs" :key="index"
            :title="tab.label" :name="tab.typeId"
            :class="{'active-tab': statusType == index}" class="tab"
          ></van-tab>
        </van-tabs>

        <van-list
          v-if="list.length > 0"
          v-model="loading"
          :finished="finished"
          finished-text="没有更多了"
          :immediate-check="false"
          @load="getData"
          class="list"
        >
          <div class="item" v-for="(item, index) in list" :key="index">
            <div class="member-info" v-if="item.has_one_member">
              <div class="avatar">
                <img :src="item.has_one_member.avatar_image" alt="">
              </div>
              <div class="member-name">
                <p class="nickname van-ellipsis">{{item.has_one_member.nickname}}</p>
                <p>ID：{{item.has_one_member.uid}}</p>
              </div>
              <div v-if="item.buy_nums">第{{item.buy_nums}}次消费</div>
            </div>
            <div class="row-class row-1">
              <div class="order_sn" v-if="item.has_one_order">订单号：{{item.has_one_order.order_sn}}</div>
              <div class="order-amount">{{$i18n.t('money')}} {{item.amounts}}</div>
            </div>
            <div class="row-class row-2">
              <div>
                <div class="time">创建时间：{{item.created_at}}</div>
                <div v-if="item.status == 2" class="time end-time">截止时间：{{item.final_time}}</div>
              </div>
              <div class="status">{{item.status_name}}</div>
            </div>
          </div>
        </van-list>

        <yz-blank :datas="list" text="空空如也"></yz-blank>
      </div>
    </div>
  </div>
</template>

<script>
import yzBlank from "components/ui_components/yz_blank";
export default {
  data () {
    return {
      statusType: 0,
      statusTabs: [
        {label: "全部", typeId: 0},
        {label: "已结算", typeId: 1},
        {label: "未结算", typeId: 2},
        {label: "预计佣金", typeId: 5},
        {label: "已冻结", typeId: 3},
        {label: "已失效", typeId: 4}
      ],

      page: 1,
      loading: false,
      isLoading: false,
      finished: false,

      statisticsInfo: null,
      list: [],
    };
  },

  activated () {
    this.getData();
  },

  methods: {
    getData () {
      if (this.finished || this.isLoading) {
        return false;
      }
      this.isLoading = true;
      $http.get("plugin.fk-distribution.frontend.controllers.center.index", {
        page: this.page,
        record_status: this.statusType
      }, 'loading').then(({result, msg, data} = res) => {
        this.loading = false;
        this.isLoading = false;
        if (result != 1) {
          return this.$toast(msg);
        }
        if (this.page == 1) {
          this.statisticsInfo = data.info;
        }

        let recordData = data.list;
        if (this.page >= recordData.last_page || recordData.data.length < recordData.per_page) {
          this.finished = true;
        }
        this.list = this.page > 1 ? this.list.concat(recordData.data) : recordData.data;
        this.page++;

      }).catch(err => {
        console.log(err);
        this.loading = false;
        this.isLoading = false;
      });
    },

    initGetData () {
      this.page = 1;
      this.finished = false;
      this.loading = false;
      this.isLoading = false;
    },

    changeStatus (type) {
      this.initGetData();
      this.getData();
    },
  },

  components: {
    yzBlank
  },
};

</script>
<style lang='scss' rel='stylesheet/scss' scoped>
.new-distributor {
  background-color: #f2f2f2;

  .user-info-box {
    min-height: 12rem;
    padding: 1rem;
    background-image: url("https://mini-app-img-1251768088.cos.ap-guangzhou.myqcloud.com/plugin/new_distributor_bg.png");
    background-size: cover;
    background-repeat: no-repeat;

    .distributor {
      display: flex;
      align-items: center;

      .avatar {
        margin: 0;
        width: 3.56rem;
        height: 3.56rem;
        border-radius: 50%;
        overflow: hidden;
      }

      .distributor-name {
        flex: 1;
        text-align: left;
        margin-left: 0.8rem;
        max-width: 8rem;
      }

      .distributor-name .name {
        font-size: 1.06rem;
        font-weight: bolc;
        color: #fff;
      }

      .distributor-name .level {
        display: inline-block;
        margin-top: 0.5rem;
        padding: 0.3rem 0.5rem;
        color: #673000;
        font-size: 11px;
        background-color: #ffec46;
        border-radius: 0.8rem;
      }
    }

    .commission-ratio {
      font-size: 14px;
      font-weight: bold;
      color: #fff;
    }

    .statistics-box {
      margin-top: 2rem;
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      color: #fff;
      white-space: pre-wrap;
      word-break: break-all;

      .statistics-item {
        margin-top: 0.5rem;
      }

      .amounts {
        font-size: 13px;
      }

      .amounts-name {
        margin: 0.3rem 0;
        font-size: 12px;
      }
    }
  }

  .detailed-box {
    background-color: #fff;
    border-radius: 0.31rem;
    margin: 0.5rem;
    overflow: hidden;

    .detailed-title {
      padding: 0.75rem;
      font-size: 14px;
    }

    .list {
      min-height: 12rem;
    }

    .item {
      padding: 0.8rem;
    }

    .member-info {
      display: flex;
      justify-content: space-between;
      align-items: flex-start;

      .avatar {
        width: 2.25rem;
        height: 2.25rem;
        border-radius: 50%;
        overflow: hidden;

        img {
          width: 100%;
          height: 100%;
        }
      }

      .member-name {
        flex: 1;
        margin-left: 0.5rem;
        text-align: left;
        line-height: 1.5;

        .nickname {
          max-width: 10rem;
        }
      }
    }

    .row-class {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-top: 0.5rem;
    }

    .row-2 {
      color: #7a7a7a;
      margin-top: 0.5rem;
    }

    .order-amount {
      color: #f15353;
    }

    .time {
      font-size: 12px;
    }

    .end-time {
      margin-top: 0.5rem;
    }
  }
}
</style>